<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>记事本</title>
</head>

<body>
	<section id="todoapp">
		<header class="header">
			<h1>记事本</h1>
			<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
				class="new-todo" />
		</header>
		<section class="main">
			<ul class="todo-list">
				<li class="todo" v-for="(item,index) in list">
					<div class="view">
						<span class="index">{{ index+1 }}.</span>
						<label>{{ item }}</label>
						<button class="destroy" @click="remove(index)"></button>
					</div>
				</li>
			</ul>
		</section>
		<!-- 统计和清空 -->
		<footer class="footer">
			<span class="todo-count" v-if="list.length!=0">
				<strong>{{ list.length }}</strong> item left
			</span>
			<button v-show="list.length!=0" class="clear-completed" @click="clear">Clear</button>
		</footer>
	</section>
	<!-- 底部 -->
	<footer class="info">
		<p>
			<a href="http://www.itheima.com/"><img src="" D:\桌面幻灯片\001.jpg"" /></a>
		</p>
	</footer>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: "#todoapp",
			data: {
				list: ["写代码", "吃饭", "睡觉"],
				inputValue: "好好学习"
			},
			methods: {
				add: function () {
					this.list.push(this.inputValue);
				},
				remove: function (index) {
					this.list.splice(index, 1);
				},
				clear: function () {
					this.list = [];
				}
			},
		})
	</script>
</body>

</html>